<template>
    <div>
      <div v-for="(item,index) of list" :key="index">
        <div class="item-title">
          <span class="title-icon"></span>
          <p class="title">{{item.title}}</p>
        </div>
        <div v-if="item.children" class="item-children">
          <list :list="item.children"></list>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "list",
      props:{
        list:Array
      }
    }
</script>

<style scoped>
  .item-title{ line-height: .8rem;font-size: .32rem;padding: 0 .2rem;border-bottom: .02rem solid #f1f1f1;
  position: relative}
  .title-icon{display: inline-block;position: absolute;width: .36rem;height: .36rem;top: .20rem;left: .2rem;background: url('//s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -.45rem no-repeat;
    background-size: auto;margin-right: .1rem;background-size: .4rem 3rem;margin-right: .2rem}
  .title{ margin-left: .48rem}
  .item-children { padding:0 .4rem}
</style>
